<template>
  <div>
    <el-row>
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
        添加类别
      </el-button>
    </el-row>

      <Table :tableData="tableData" :page="page" :limit="limit" @del="del" @edit="edit"></Table>

    <div style="text-align: center;">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="page"
        :page-size.sync="limit">
      </el-pagination>
      <el-drawer title="添加轮播图" :visible.sync="drawer" :with-header="false">
        <Form @cli="add" ref="from"></Form>
      </el-drawer>
    </div>
    <el-dialog title="提示" :visible.sync="wai" width="30%">
    
      <span slot="footer" class="dialog-footer">
        <div>
          <el-input></el-input>
          <!-- <el-input v-model="val"></el-input> -->
        </div>
       
        <div style="text-align:center;margin-top:40px;">
          <el-button>提交</el-button>
        </div>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import Table from './table.vue'
import Form from './form.vue'
import { getBannerList, addbanner, delbanner, updateFlag } from '../../api/banner'
export default {
  components: {
    Form,
    Table
  },
  data() {
    return {
      val:'',
      wai:false,
      tableData: [],
      total: 0,
      page: 1,
      limit: 15,
      drawer: false,
      img: '',
      link: '',
      alt: ''
    }
  },
  mounted() {
    getBannerList().then(res => {
      this.tableData = res.data
      this.total = res.data.length
    })
  },
  methods: {
     dels(ax,data=false){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        data?await ax(data):await ax()
        this.list()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    list() {
      getBannerList().then(res => {
        this.tableData = res.data
        this.total = res.data.length || 0
      })
    },
    del(bannerid) {
     this.dels(delbanner,bannerid)
    },
    async add(form) {
      await addbanner({
        img: form.img,
        link: form.link,
        alt: form.alt
      })
      this.list()
      this.drawer = false
    },
  
    async flags(item) {
      await updateFlag({ bannerid: item.bannerid, flag: item.flag })
      this.list()
    },
     edit(row){

    this.wai=true
    }
  },

}
</script>

<style lang="scss" scoped>
img {
  display: block;
  max-height: 69px;
  max-width: 180px;
}

</style>